import React from "react";
import { Modal, AutoComplete, Select, Input, Icon, Upload, message, Tabs } from "antd";
import { observer, inject } from "mobx-react";
import "./style.scss";

const { Option } = Select;
const { Dragger } = Upload;
const { TabPane } = Tabs;

const props = {
    name: "file",
    multiple: true,
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    onChange(info) {
        const { status } = info.file;
        if (status !== "uploading") {
            console.log(info.file, info.fileList);
        }
        if (status === "done") {
            message.success(`${info.file.name} file uploaded successfully.`);
        } else if (status === "error") {
            message.error(`${info.file.name} file upload failed.`);
        }
    }
};

const LEVEL_list = [
    { key: "A1", text: "A1" },
    { key: "A2", text: "A2" },
    { key: "A3", text: "A3" },
    { key: "A4", text: "A4" },
    { key: "B1", text: "B1" },
    { key: "B2", text: "B2" },
    { key: "B3", text: "B3" },
    { key: "B4", text: "B4" }
];

const TAB_LIST = {
    APP: [{ name: "添加APP", key: "app" }, { name: "批量添加", key: "batch" }],
    People: [{ name: "添加人员", key: "people" }, { name: "批量添加", key: "batch" }],
    SubjectAPP: [{ name: "添加APP", key: "app" }, { name: "批量添加", key: "batch" }],
    SubjectPeople: [{ name: "添加人员", key: "people" }, { name: "批量添加", key: "batch" }]
};

@inject("AddModalStore")
@observer
class AddApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: TAB_LIST[this.props.type || "APP"]
        };
    }

    componentDidMount() {
        this.props.AddModalStore.changeTab(
            this.props.type === "People" || this.props.type === "SubjectPeople" ? "people" : "app"
        );
    }

    onChange = (type, e) => {
        console.log(e);
        this.props.AddModalStore.updateFormData(type, e);
    };

    onSearch = e => {
        this.props.AddModalStore.getSearchOptions(e);
    };

    onOk = () => {
        this.props.AddModalStore.submit(this.props.onCancel);
    };

    handleChangeTab = e => {
        this.props.AddModalStore.changeTab(e);
    };

    render() {
        const {
            type,
            AddModalStore: { dataSource, curTab }
        } = this.props;

        const options = dataSource.map(group => (
            <Option key={group.title} value={group.title}>
                {group.title}
                <span className="certain-search-item-count">{group.count} people</span>
            </Option>
        ));

        const { tabs } = this.state;

        return (
            <Modal
                visible
                title=""
                className="dayu-dialog"
                cancelText="取消"
                okText="确认"
                onOk={this.onOk}
                onCancel={() => this.props.onCancel()}
            >
                <div className="add-app">
                    <Tabs
                        defaultActiveKey="1"
                        activeKey={curTab}
                        className={`add-app-tab`}
                        onChange={this.handleChangeTab}
                    >
                        {tabs.map(item => (
                            <TabPane tab={item.name} key={item.key}>
                                {curTab === "app" || curTab === "people" ? (
                                    <div className="add-app-content">
                                        <div className="add-app-item">
                                            <span>
                                                {type === "People" || type === "SubjectPeople" ? "人员信息" : "APP信息"}
                                            </span>
                                            <div
                                                className="certain-category-search-wrapper"
                                                style={{ width: "100%", marginTop: 15 }}
                                            >
                                                <AutoComplete
                                                    className="certain-category-search"
                                                    dropdownClassName="certain-category-search-dropdown"
                                                    dropdownMatchSelectWidth={false}
                                                    dropdownStyle={{ width: 300 }}
                                                    size="large"
                                                    style={{ width: "100%" }}
                                                    dataSource={options}
                                                    placeholder={
                                                        type === "APP" || type === "SubjectAPP"
                                                            ? "搜索app名称"
                                                            : "搜索人员名称或者身份证号"
                                                    }
                                                    optionLabelProp="value"
                                                    onSearch={this.onSearch}
                                                    // onSelect={e => console.log("被选中时调用", e)}
                                                    onChange={e => this.onChange("name", e)}
                                                >
                                                    <Input
                                                        suffix={
                                                            <span
                                                                onClick={e => this.onSearch(e.target.value)}
                                                                style={{ color: "#4bb7ff" }}
                                                            >
                                                                <Icon type="search" className="certain-category-icon" />
                                                            </span>
                                                        }
                                                    />
                                                </AutoComplete>
                                            </div>
                                        </div>
                                        <div className="add-app-item">
                                            <div>管控等级</div>
                                            <Select
                                                showSearch
                                                style={{ width: 260, marginTop: 15 }}
                                                placeholder="选择管控等级"
                                                optionFilterProp="children"
                                                onChange={e => this.onChange("level", e)}
                                                // onFocus={this.onFocus}
                                                // onBlur={this.onBlur}
                                                // onSearch={this.onSearch}
                                                filterOption={(input, option) =>
                                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
                                                    0
                                                }
                                            >
                                                {LEVEL_list.map(item => (
                                                    <Option key={`opt-${item.key}`} value={item.key}>
                                                        {item.text}
                                                    </Option>
                                                ))}
                                            </Select>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="add-app-content">
                                        <div className="upload-header">
                                            <span>上传导入文件</span>
                                            <span className="upload-model">
                                                <a href="#">下载模板文件</a>
                                            </span>
                                        </div>
                                        <div className="upload-content">
                                            <Dragger {...props}>
                                                <p className="ant-upload-drag-icon">
                                                    <Icon type="inbox" />
                                                </p>
                                                <p className="ant-upload-text">
                                                    Click or drag file to this area to upload
                                                </p>
                                                <p className="ant-upload-hint">
                                                    Support for a single or bulk upload. Strictly prohibit from
                                                    uploading company data or other band files
                                                </p>
                                            </Dragger>
                                        </div>
                                    </div>
                                )}
                            </TabPane>
                        ))}
                    </Tabs>
                </div>
            </Modal>
        );
    }
}

export default AddApp;
